<template>

    <!--筛选条件-->
    <div class="shaixuan2">
        <div style="margin-top: 15px;">
            <el-input placeholder="搜索关键词" v-model="input" class="input-with-select" style="width: 400px;" size="mini">
                <el-select v-model="typeinput" slot="prepend" placeholder="请选择"  style="width: 130px;">
                    <el-option label="用户昵称" value="1"></el-option>
                    <el-option label="评论内容" value="2"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search" @click="searchtype"></el-button>
            </el-input>
            <el-select v-model="zhenshi_pingjia" placeholder="是否真实评价" @change="onlinechange" style="margin-left: 10px;" size="mini">
                <el-option
                    v-for="item in zhenshi_pingjias"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="benchang_xinpinglun" placeholder="是否本场新评论" @change="dingyuechange" style="margin-left: 10px;" size="mini">
                <el-option
                    v-for="item in benchang_xinpingluns"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-button style="margin-left: 20px;"  size="mini"  @click="resetForm('searchinput')">重置</el-button>
            <PersButton type="text" size="mini" icon="el-icon-refresh" perms="sys:role:del" label="刷新" @click="refresh()"></PersButton>
            <el-button class="addshuziren_btn" round type="danger"  @click="xinzeng">新增</el-button>
            <vue-json-excel
                style="display: inline;margin-left: 10px;"
                :data="tableData1"
                :fields="excelFields"
                name="导出评论.xlsx"
                type="xlsx"
            >
                <el-button size="mini">导出</el-button>
            </vue-json-excel>
        </div>
        <div class="first_table">
            <el-row>
                <el-col :span="24">
                    <div class="yixuan">已选 {{ multipleSelectioncount }} <el-button @click="piliangshanchu" type="text">批量删除</el-button></div>
                </el-col>
            </el-row>
            <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all v-loading="loading" @selection-change="handleSelectionChange">
                <el-table-column align="center" header-align="center" type="selection" width="55"></el-table-column>
                <el-table-column align="center" fixed  width="55" label="序号"  prop="id"></el-table-column>
                <el-table-column  align="center"  header-align="center" prop="wx_avatarurl" label="用户头像">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.wx_avatarurl" fit="fill" style="width: 60px;height: 60px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="nickname" label="用户昵称"></el-table-column>
                <el-table-column header-align="center" align="center" prop="phone" label="手机号"></el-table-column>
                <el-table-column header-align="center" align="center" prop="yaoqingzhujiao" label="邀请助教"></el-table-column>
                <el-table-column header-align="center" align="center" prop="shenfen" label="身份"></el-table-column>
                <el-table-column header-align="center" align="center" prop="content" label="评论内容"></el-table-column>
                <el-table-column header-align="center" align="center" prop="zhenshipinglun" label="是否真实评论">
                    <template slot-scope="scope">
                        <span >
                        {{ scope.row.is_real_msg ? '是' : '否' }}
                    </span>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="benchang_zhenshi_pinglun" label="是否本场真实评论">
                    <template slot-scope="scope">
                        <span >
                        {{ scope.row.is_new_msg === 1 ? '是' : '否' }}
                    </span>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="send_time2" label="发送时间"></el-table-column>

                <el-table-column align="center" header-align="center" prop="id" label="操作">
                    <template slot-scope="scope">
                        <PersButton type="text" size="mini" icon="el-icon-delete" perms="sys:role:del" label="编辑" @click="edit(scope.row)"></PersButton>
                        <PersButton type="text" size="mini" icon="el-icon-delete" perms="sys:role:del" label="删除" @click="del(scope.row)"></PersButton>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

        <el-dialog title="!formgroup._id ? '新增评论' : '编辑评论'" :visible.sync="opendialog" width="40%">
            <el-form ref="form" :model="formgroup" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item v-if="formgroup._id" label="头像" prop="wx_avatarurl">
                            <el-image :src="formgroup.wx_avatarurl" fit="fill" style="width: 60px;height: 60px;"></el-image>
                        </el-form-item>
                        <el-form-item v-if="!formgroup._id" label="头像" prop="wx_avatarurl">
                            <div class="uploadcol">
                                <div class="uploadborder">
                                    <img v-if="formgroup.wx_avatarurl" :src="formgroup.wx_avatarurl" width="100%" height="100%" />
                                    <img v-else src="@/assets/img/uploadimg.jpg" width="100%" height="100%" />
                                </div>
                                <el-button type="primary" @click="openUploadDial()" size="mini"
                                           style="margin-top:10px">上传头像</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="昵称" prop="name">
                            <el-input v-if="formgroup._id" style="width:80%" v-model="formgroup.nickname"  disabled size="small" />
                            <el-input v-if="!formgroup._id" style="width:80%" v-model="formgroup.nickname" size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="内容" prop="content">
                            <el-input type="textarea" :rows="2" style="width:80%" v-model="formgroup.content"   size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="发送时间" prop="send_time">
                            <el-time-picker
                                v-model="formgroup.send_time"
                                placeholder="发送时间">
                            </el-time-picker>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="opendialog = false" size="small">取 消</el-button>
                <el-button type="primary" @click="!formgroup._id ? submitForm('form') : subEditForm('form')" size="small">保存并生效</el-button>
            </div>
        </el-dialog>
        <select-img :show="IsShowPicDig" @update="cleanDiaglog" :selectType="imgnum" @selectSure="selectImgs"
                    :type="0"></select-img>
    </div>

</template>
<script>
import VueJsonExcel from "vue-json-excel";



import {getpinglun,pldelpinglun,delpinglun,addpinglun,editpinglun} from '@/api/live/action';
import PersButton from '@/components/PersButton';
import SelectImg from '@/components/select-img';

export default {
    components:{
        VueJsonExcel,
        PersButton,
        SelectImg
    },
    props:{
        liveId:{
            type:String,
            default:''
        },
    },
    data(){
        return {
            formgroup:{
                _id:'',
                wx_avatarurl:'',
                nickname:'',
                content:'',
                send_time:'',
                liveId:this.$props.liveId,
            },
            rules: {
                nickname: [{
                    required: true,
                    message: "昵称不能为空",
                    trigger: "blur"
                }],
                content: [{
                    required: true,
                    message: "内容不能为空",
                    trigger: "blur"
                }],
                msg_send_time: [{
                    required: true,
                    message: "发送时间不能为空",
                    trigger: "blur"
                }],
            },
            opendialog:false,
            pageSize: 10, //一页显示多少条
            pageNumber: 1,
            total: 0, //总页数
            input:'',
            tableData:[],
            tableData1:[],
            loading: false,
            multipleSelectioncount: 0,
            benchang_xinpinglun:'',
            zhenshi_pingjia:'',
            typeinput:'1',
            zhenshi_pingjias: [
                {
                    value: '',
                    label: '是否真实评论'
                },{
                    value: '1',
                    label: '是'
                }, {
                    value: '2',
                    label: '否'
                }
            ],
            benchang_xinpingluns: [
                {
                    value: '',
                    label: '是否本场新评论'
                },{
                    value: '1',
                    label: '是'
                }, {
                    value: '2',
                    label: '否'
                }
            ],
            excelFields: {
                "序号": "id",
                "用户昵称": "nickname",
                "手机号": "phone",
                "邀请助教": "yaoqingzhujiao",
                "身份": "shenfen",
                "评论内容": "content",
                "是否真实评论": "isreal",
                "是否本场真实评论": "newmsg",
                "发送时间": "send_time2"
                
            },

            IsShowPicDig: false,
            imgnum: 1, //选择图片数量,
            isShowBgPicDiag: false,
            isShowVideoPicDiag: false,
        }
    },
    created(){

        this.init();
    },
    methods: {
        refresh(e){
            this.init();
        },
        resetForm(formName) {
            this.input = '';
            this.zhenshi_pingjia = '';
            this.benchang_xinpinglun = '';
            this.typeinput = '';
            this.init();
        },
        init(){
            let _param = {
                liveId:this.$props.liveId,
                input:this.input,
                typeinput:this.typeinput,
                user_id:this.user_id,
                pageSize:this.pageSize,
                zhenshi_pingjia:this.zhenshi_pingjia,
                benchang_xinpinglun:this.benchang_xinpinglun,
                pageNumber:this.pageNumber
            }
            getpinglun(_param).then((res) => {
                if (res.code == 200) {

                    this.total = res.data.total;
                    this.tableData = res.data.list;
                } else {
                    this.msgError(res.msg);
                }
            })
            
            let _param1 = {
                liveId:this.$props.liveId,
                input:this.input,
                typeinput:this.typeinput,
                user_id:this.user_id,
                pageSize:9999999999999,
                zhenshi_pingjia:this.zhenshi_pingjia,
                benchang_xinpinglun:this.benchang_xinpinglun,
                pageNumber:this.pageNumber
            }
            getpinglun(_param1).then((res) => {
                if (res.code == 200) {
                    this.total = res.data.total;

                    let data = res.data.list;
                    for (let i = 0; i < data.length; i++) {
                        if (data[i]['is_real_msg']) {
                            data[i]['isreal'] = '是';
                        }else {
                            data[i]['isreal'] = '否';
                        }
                        if (data[i]['is_new_msg']) {
                            data[i]['newmsg'] = '是';
                        }else {
                            data[i]['newmsg'] = '否';
                        }
                    }
                    this.tableData1 = data;
                } else {
                    this.msgError(res.msg);
                }
            })
        },
        handleSizeChange: function (e) {
            console.log(e);
            this.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            this.pageNumber = e;
            this.init();
        },
        searchtype(e){
            this.init();
        },
        onlinechange(e){
            this.init();
        },
        dingyuechange(e){
            this.init();
        },
        //已选
        handleSelectionChange: function (e) {
            console.log(e);
            let selectChang = []
            for (let item of e) {
                selectChang.push(item._id)

            }
            this.multipleSelection = selectChang;
            this.multipleSelectioncount = selectChang.length;
            console.log(selectChang);
        },
        //批量删除
        piliangshanchu: function (e) {
            this.$confirm('确定批量删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let _param = {
                    liveId:this.$props.liveId,
                    ids: this.multipleSelection
                }
                pldelpinglun(_param).then((res) => {
                    if (res.code == 200) {
                        this.msgSuccess(res.msg);
                        this.init();
                    } else {
                        this.msgError(res.msg);
                    }
                })


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        del: function (data) {
            this.$confirm('确定删除【' + data.nickname + '】吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let _param = {
                    liveId:this.$props.liveId,
                    id: data._id
                }
                delpinglun(_param).then((res) => {
                    if (res.code == 200) {
                        this.msgSuccess(res.msg);
                        this.init();
                    } else {
                        this.msgError(res.msg);
                    }
                })


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        edit:function(e){

            console.log(e);

            let editForm = {
                _id:e._id,
                wx_avatarurl:e.wx_avatarurl,
                nickname:e.nickname,
                content:e.content,
                send_time:e.send_time,
                liveId:this.$props.liveId
            }

            Object.assign(this.formgroup, editForm);
            this.opendialog = true;
            console.log(this.formgroup);
        },
        dianji_xiangqing_click:function(e){

        },
        xinzeng:function(e){
            this.formgroup={
                _id:'',
                wx_avatarurl:'',
                nickname:'',
                content:'',
                send_time:'',
                liveId:this.$props.liveId
            };
            this.opendialog = true;
        },
        subEditForm:function(e){
            console.log(this.formgroup);
            editpinglun(this.formgroup).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    this.msgSuccess(res.msg);
                    this.init();
                    this.opendialog = false;
                } else {
                    this.msgError(res.msg);
                }
            })
        },
        submitForm:function(e){
            console.log(this.formgroup);
            addpinglun(this.formgroup).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    this.msgSuccess(res.msg);
                    this.init();
                    this.opendialog = false;
                } else {
                    this.msgError(res.msg);
                }
            })
        },
        cleanDiaglog: function (shows) {
            this.IsShowPicDig = false;
        },
        selectImgs: function (res) {

            console.log(res);
            this.IsShowPicDig = true;
            this.formgroup.wx_avatarurl = res[0].urls
        },
        openUploadDial: function () {

            this.IsShowPicDig = true;
        },
    }

}

</script>


<style>
.yixuan {
    margin: 20px;
    color: #787878;
}

.addshuziren_btn {
    position: absolute;
    right: 0;
    margin-right: 50px;
}


.daorushuziren_btn {
    position: absolute;
    right: 0;
    margin-right: 230px;
}

.daorushuziren_btn2 {
    position: absolute;
    right: 0;
    margin-right: 140px;
}

.uploadcol {
    display: flex;
    flex-flow: column;
    width: 100px;
}

.uploadborder {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    /* cursor: pointer;

    position: relative;

    overflow: hidden; */
    width: 100px;
    height: 100px;
}

</style>